class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      list:[{
        text: 'apple',
        done: true
      }, {
        text: 'banana',
        done: false
      }],
      currenEditItem: null,
      searchText:'',
      totalNum: 0,
      doneNum: 0
    }
    this.addItem = this.addItem.bind(this);
    this.updateAddInput = this.updateAddInput.bind(this);
  }
  componentDidMount() {
  } 
  componentWillUnmount() {
  }
  updateAddInput(e) {
    let value = e.target.value;
    this.setState({
      value: value
    })    
  }
  addItem(e){
    if(e.keyCode === 13) {
      let value = e.target.value;
      let list = this.state.list;
      list.push({
        done: false,
        text: value
      })
      this.setState({
        list: list,
        value: ''
      });
    }
  }
  deleteItem(index) {
    let list = Object.assign([], this.state.list);
    list.splice(index, 1);
    this.setState({
      list: list
    });
  }
  editItem(item){
    this.setState({
      currenEditItem: item
    })
  }
  updateCurrenItem(e) {
    let value = e.target.value;
    this.setState((state) => {
      let list = state.list;
      list.map(item => {
        if (item === state.currenEditItem) {
          item.done = state.currenEditItem.done;
          item.text = value;
        }
        return item;
      });
      return {
        list: list
      }
    })    
  }
  toggleDone(editItem, e) {
    let value = e.target.checked;
    this.setState((state) => {
      let list = state.list;
      list.map(item => {
        if (item === editItem) {
          item.done = value;
          item.text = editItem.text;
        }
        return item;
      });
      return {
        list: list
      }
    })
  }  
  finishUpdate(e) {
    if(e.keyCode === 13 || e.type === 'blur') {
      this.setState({
        currenEditItem: null
      })
    }
  } 
  getTotalNum() {
    return this.state.list.length;
  } 
  getDoneNum() {
    return this.state.list.filter( item => {
      return item.done;
    }).length;
  }
  getUnDoneNum() {
    return this.getTotalNum() - this.getDoneNum();
  }
  handleChangeSearch(e) {
    let value = e.target.value;
    this.setState({
      searchText: value
    });
  }
  render() {
    let searchText = this.state.searchText;
    const filterList = this.state.list.filter( item => {
      return item.text.indexOf(searchText) > -1;
    });
    return (
      <div className="app">
        <h1>TodoMVC</h1>
        <div>
         <input 
            value={this.state.value} 
            onChange={this.updateAddInput} 
            onKeyUp={this.addItem}
            />
        </div>
        <div className="item-wrap">
          <ul>
          {
            filterList.map( (item,index) => 
              <li key={index} 
                  className={ item === this.state.currenEditItem ? 'editing': '' }
                  >
                <input type="checkbox" checked={item.done} 
                  onChange={ this.toggleDone.bind(this, item) }
                />
                <span onDoubleClick={this.editItem.bind(this, item)}>{item.text}</span>
                <button onClick={this.deleteItem.bind(this, index)}>x</button>
                <input type="text" value={item.text} 
                  onChange={this.updateCurrenItem.bind(this)}
                  onKeyUp={this.finishUpdate.bind(this)}
                  onBlur={this.finishUpdate.bind(this)} />
              </li>
            )
          }
          </ul>
        </div>
        <div className="state-wrap">
          Total: { this.getTotalNum() }, 
          Done: {this.getDoneNum() },
          Undone: {this.getUnDoneNum() }
        </div>
        <hr />
        筛选: <input type="text" 
          value={this.state.searchText} 
          onChange={this.handleChangeSearch.bind(this)} />        
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);